<template>
    <ph-view>
        <ph-flex>
            <ph-form>
                <ph-form-input @phChange="onBWChange" type="number" :value="data.borderWidth" label="border-width"></ph-form-input>
                <ph-form-input @phChange="onAlphaChange" type="number" :value="data.opacity" label="opacity"></ph-form-input>
                <ph-form-select @phChange="onDPChange" :value="data.display" label="display">
                    <ph-option v-for="(k,i) in displayDs" :value="i" :key="i">{{k}}</ph-option>
                </ph-form-select>
                <ph-form-color @phChange="onCChange" :value="data.color" label="color"></ph-form-color>
                <ph-form-color @phChange="onBGChange" :value="data.background" label="background"></ph-form-color>
                <ph-form-input @phChange="onWChange" type="number" :value="data.width" label="width"></ph-form-input>
                <ph-form-input @phChange="onHChange" type="number" :value="data.hegiht" label="height"></ph-form-input>
                <ph-form-input @phChange="onPDChange" type="number" :value="data.padding" label="padding"></ph-form-input>
                <ph-form-input @phChange="onFSChange" type="number" :value="data.fontSize" label="font-size"></ph-form-input>
                <ph-form-input @phChange="onMWChange" type="number" :value="data.minWidth" label="min-width"></ph-form-input>
                <ph-form-input @phChange="onMLChange" type="number" :value="data.marginLeft" label="margin-left"></ph-form-input>
                <ph-form-input @phChange="onBRChange" type="number" :value="data.borderRadius" label="border-radius"></ph-form-input>
                <ph-form-input @phChange="onLHChange" type="number" :value="data.lineHeight" label="line-height"></ph-form-input>
            </ph-form>
            <ph-flex dir="col">
                <pre class="demo-code">{{code}}</pre>
                <button :style="style">预览</button>
            </ph-flex>
        </ph-flex>
    </ph-view>
</template>

<script lang="ts" setup>
import { computed, reactive, ref, Ref } from "vue";
import { 
    PhView,
    PhFlex,
    PhForm ,
    PhFormInput,
    PhFormColor,
    PhFormSelect,
    PhOption
    } from '@/components'
    const data = reactive({
        borderWidth:1,
        opacity:100,
        display:1,
        color:'#636363',
        background:'#ffffff',
        width:32,
        height:50,
        padding:20,
        fontSize:14,
        minWidth:100,
        marginLeft:0,
        borderRadius:0,
        lineHeight:14
    })
    const displayDs = ['block','inlin-block','flex','none']
    const style = computed(()=>{
        return {
            borderWidth:data.borderWidth+"px",
            opacity:data.opacity/100,
            display:displayDs[data.display],
            color:data.color,
            background:data.background,
            width:data.width+"px",
            height:data.height+"px",
            padding:data.padding+"px",
            fontSize:data.fontSize+"px",
            minWidth:data.minWidth+"px",
            marginLeft:data.marginLeft+"px",
            borderRadius:data.borderRadius+"px",
            lineHeight:data.lineHeight+"px"
        }
    }) as Ref<Record<string,unknown>>
    
    const genCode = ()=>{
        const codes = [
            `borderWidth=${data.borderWidth}px`,
            `opacity=${data.opacity/100}`,
            `display=${displayDs[data.display]}`,
            `color=${data.color}`,
            `background=${data.background}`,
            `width=${data.width}px`,
            `height=${data.height}px`,
            `padding=${data.padding}px`,
            `fontSize=${data.fontSize}px`,
            `minWidth=${data.minWidth}px`,
            `marginLeft=${data.marginLeft}px`,
            `borderRadius=${data.borderRadius}px`,
            `lineHeight=${data.lineHeight}px` ] as string[]
code.value = `
<button 
${codes.join("\n")}>预览</button>
`
    }
    const code = ref("")
    genCode()
    const onBWChange = (v:number)=>{
        data.borderWidth = v
        genCode()
    }
    const onAlphaChange = (v:number)=>{
        data.opacity = v
        genCode()
    }
    const onDPChange = (v:number)=>{
        data.display = v
        genCode()
    }
    const onCChange = (v:string)=>{
        data.color = v
        genCode()
    }
    const onBGChange = (v:string)=>{
        data.background = v
        genCode()
    }
    const onWChange = (v:number)=>{
        data.width = v
        genCode()
    }
    const onHChange = (v:number)=>{
        data.height = v
        genCode()
    }
    const onPDChange = (v:number)=>{
        data.padding = v
        genCode()
    }
    const onFSChange = (v:number)=>{
        data.fontSize = v
        genCode()
    }
    const onMWChange = (v:number)=>{
        data.minWidth = v
        genCode()
    }
    const onMLChange = (v:number)=>{
        data.marginLeft = v
        genCode()
    }
    const onBRChange = (v:number)=>{
        data.borderRadius = v
        genCode()
    }
    const onLHChange = (v:number)=>{
        data.lineHeight = v
        genCode()
    }
</script>
<style lang="scss">
.demo-code{
    background-color: var(--ph-dark);
    color: var(--ph-c-l2);
    padding: 15px;
    margin-bottom: 15px;
}
</style>